<template>
  <show-box :showHeader="false">
    <template slot="card-body">
      <SkuTable
        :border="false"
        :showTotal="false"
        :data-source="resultList"
        :columns="columns"
        :tableHeight="570"
        :rowHeight="36"
      />
    </template>
  </show-box>
</template>
<script>
import ShowBox from './ShowBox';
import SkuTable from '@/components/skusTable'
import { initRelationTableCulumns } from '../constants'

export default {
  components: {
    ShowBox,
    SkuTable
  },
  props: {
    dataList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      DeleteIcon: () => import('@/pages/commodity/departmentManage/departmentManage/components/DeleteIcon'),
      columns: [],
    }
  },
  computed: {
    resultList () {
      this.initTableColums()
      return [...this.dataList]
    }
  },
  methods: {
    initTableColums () {
      this.columns = initRelationTableCulumns(this)
    },
    handleDeleteSelected (item, index) {
      this.resultList.splice(index, 1)
      this.$emit('update:dataList', this.resultList)
      this.$emit('delete', item)
    }
  }
}
</script>
<style lang="less" scoped>
.show-list-wrap {
  height: 540px;
  overflow: hidden;
  overflow-y: auto;
}
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  margin-right: 5px;
  border-bottom: 1px dashed #ccc;
}
.name-label {
  width: 70px;
}
.delete-icon {
  width: 70px;
  text-align: right;
}
.content-label {
  flex: 0.5;
  text-align: center;
  margin-left: 10px;
  span {
    display: inline-block;
    text-align: left;
  }
}
</style>
